<template>
  <el-tooltip
    class="box-item"
    :effect="theme"
    :content="content"
    :disabled="dis"
    :teleported="false"
    :show-after="500"
  >
    <div
      :class="direction ? 'ellipsis' : 'overflow'"
      :style="{ maxWidth }"
      ref="evalbox"
    >
      <span ref="evalcontent">{{ content }}</span>
    </div>
  </el-tooltip>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
interface prop {
  direction?: "column";
  maxWidth?: string;
  content: string;
  row?: number;
  theme?: "light" | "dark";
}

const props = withDefaults(defineProps<prop>(), {
  theme: "light",
});

const evalbox = ref();
const evalcontent = ref();
const dis = ref(true);
onMounted(() => {
  if (
    !props.direction &&
    evalcontent.value.offsetWidth > evalbox.value.offsetWidth
  ) {
    dis.value = false;
  }
  if (
    props.direction === "column" &&
    evalcontent.value.offsetHeight > evalbox.value.offsetHeight
  ) {
    dis.value = false;
  }
});
</script>
<style scoped>
.overflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: v-bind(row);
  overflow: hidden;
  -webkit-box-orient: vertical;
}
</style>
